<template>
  <div>

    <el-card class="box-card" style="width: 700px;margin: 0 auto;">


      <div class="applyDiv" >
        <p class="applyP" >物资名称:</p>
        <el-input class="applyInput" v-model="donation.itemName" placeholder="物资名称" />
      </div>
      <div class="applyDiv" >
        <p class="applyP" >描述:</p>
        <el-input class="applyInput" v-model="donation.description" placeholder="物资描述" />
      </div>
      <div class="applyDiv" >
        <p class="applyP" >捐赠数量:</p>
        <el-input class="applyInput" v-model="donation.count" placeholder="数量" />
      </div>
      <div class="applyDiv" >
        <p class="applyP" >申请时间:</p>
        <el-input class="applyInput" v-model="time" placeholder="申请时间" />
      </div>
      <div class="applyDiv" style="height: 170px">
        <p class="applyP" >物资图片:</p>
        <div style="float: left;margin-left: 80px;margin-top: 7px">
          <el-upload
                  action="http://176.17.10.223:18084/donation/upload"
                  name="picFile"
                  :limit="1"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-success="handleSuccess"
                  :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </div>
      </div>
      <div class="applyDiv" >
        <div style="float: right;margin-top: 8px">
          <el-button @click="submitForm()" size="small" style="width: 150px;background-color: #009BB3;color: white;" round>提交</el-button>
          <el-button size="small" style="width: 150px" round>重置</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        user:{},
        dialogImageUrl: '',
        dialogVisible: false,
        time:'',

        circleUrl: "",//图片的路径
        donation: {
          itemName: '',//物资名称
          description: '',//物资描述
          count: '',//物资数量
          img: '',//物资图片

          user:{
            id:"",
            username:"",
            name:"",
            idNumber:"",
            age:"",
            phone:"",
            email:"",
            isEnable:"",
            roleId:""
          },
        },
      };
    },
    created() {
      this.getData();
    },
    methods: {
      getData(){
        this.time = this.getNowTime()
      },
      // 获取当前时间
      getNowTime() {
        const yy = new Date().getFullYear()
        const MM = (new Date().getMonth() + 1) < 10 ? '0' + (new Date().getMonth() + 1) : (new Date().getMonth() + 1)
        const dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
        const HH = new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours()
        const mm = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
        const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
        return yy + '-' + MM + '-' + dd + ' ' + HH + ':' + mm + ':' + ss
      },


      handleRemove(file, fileList) {
        console.log(file, fileList);
        //当点击删除图片时方法会执行
        //file代表要删除的文件
        //file.response代表文件上传成功时 服务器响应的数据(文件名)
        console.log("文件名="+file.response);
        //http://176.17.10.223:8080/remove?name=xxx.jpg
        let url = "http://176.17.10.223:18888/donation/remove"
        let data = 'name=' + file.response;
        this.axios.post(url,data).then((response) => {
          console.log("服务器图片已经删除")
        })
      },
      handleSuccess(response,file,fileList){
        //response=file.response
        console.log("文件上传完成, 图片名="+response);
        this.donation.img = response;
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },


      // 提交表单内容
      submitForm() {
        // 获取缓存中的user对象
        this.user = JSON.parse(localStorage.getItem('user'))
        console.log("userID======" + this.user.id)
        let url = "http://176.17.10.223:18888/donation/add-new";
        let data = 'itemName=' + this.donation.itemName +
                '&description=' + this.donation.description +
                '&count=' + this.donation.count +
                "&userId=" + this.user.id +
                "&img=" + this.donation.img;
        this.axios.post(url,data).then( (response)=> {
          let message = response.data.message;
          if (message == null){
            console.log(response.data)
            this.$message({
              message: '提交成功',
              type: 'success',

            });
            window.location.reload();
          }else {
            this.$message.error(message);

          }

        })
      },
      // 重置
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style>

</style>